	{%include "topo_180plus.html"%}
	{%load filtros%}
	<div id="principal">
		<div id="meio">
			<div id="conteudo">
				{%include "header.html"%}
				<div class="barra_inf barra_nav" style="border-top:2px solid #009f3c;">
					<ul class="nav_localizacao">
						<li><a href="/home/">In&iacute;cio</a></li><span>>></span>
					<li><a href="/listar/{{anuncio.categoria.id}}">{{anuncio.categoria.nome}}</a></li><span>>></span>
					<li><a href="/listar/{{anuncio.categoria.id}}/{{anuncio.subcategoria.id}}">{{anuncio.subcategoria.nome}}</a></li><span>>></span>
					<li><a href="#">{{anuncio.descricao}}</a></li>
					</ul>
				</div>
				<div id="box_esquerda_produto">
					<div class="foto_prd">
						<div class="foto_box">
							<img src="{{MEDIA_URL}}{{anuncio.foto}}"/>
						</div>
						<div class="scrl_foto">
							<div class="slide-lateral">
			                    <ul id="slider-fotos">
			                    {%for imagem in imagens%}
			                    	<li>
			                        	<a class="miniFotoPrd"><img src="{{MEDIA_URL}}{{imagem.foto}}" /></a>
			                        </li>
			                     {%endfor%}
			                    </ul>
			                </div>						
						</div>
					</div>
					<div class="desc_prd">
						<div class="barra_inf" style="border:1px solid #009f3c; border-left:2px solid #009f3c;">
							<p class="titulo" style="color:#009f3c;">DESCRI&Ccedil;&Atilde;O</p>
							<!-- input class="naogostei" type="button" title="Nao Gostei!">
							<input class="gostei" type="button" title="Gostei!"> -->
							<input class="denunciar" type="button" value="Denunciar an&uacute;ncio" onclick="showDiv('box_resumo_denunciar')">
							<div id="box_resumo_denunciar" style="display: none;">
								<img src="{{MEDIA_URL}}imagens/balao_destaque.png"/>
   								<p><strong>Qual o motivo da sua den&uacute;ncia&#63; </strong></p>
		                        
		                        <p>
									<textarea rows="" cols="" style="max-width: 240px; min-width:240px; height: 55px;"></textarea>
								</p>
								<p><input class="perfil_inf_btnSalvar" type="button" value="Den&uacute;nciar" style="top: 0;"></p>
							</div>
						</div>
						<div class="bd_desc_prd">
							<p>{{anuncio.detalhes}}</p>
						</div>
					</div>
					<div id="box_comentarios">
                    	<div id="nav_comentarios">
                    		<h4>COMENT&Aacute;RIOS</h4>
                            <span class="qtd_comentarios">{{comentariosAnuncio.count}}</span>
                            <p>Comentando no classi180, voc&ecirc; concorda com os <a href="#">termos de uso</a>.</p>
                        </div>
						<ul id="lista_comentarios">
						{%for comentario in comentariosAnuncio%}
							<li class="comentario">
								<div class="id_comentario">
									<span class="qtd_comentarios"></span>
									<strong>{{comentario.user.username}}</strong>
									<p>{{comentario.submit_date}}</p>
								</div>
								<div class="txt_comentario">
									<p>{{comentario.comment}}</p>
								</div>
							</li>
						{%endfor%}
						</ul>
						<div id="box_novo_comentario">
							{%if request.user.is_authenticated%}
							<strong>{{request.user.username}}</strong>
							{%else%}
							<strong>Visitante</strong>
							<p><a href="#">Fa&ccedil;a o login</a> da sua conta 180plus para exibir seu nome</p>
							<div class="qtd_char">400</div>
							{%endif%}
							<form action="/anuncio/{{anuncio.id}}/" method="post"> {%csrf_token%}
							<textarea name = "comentText" cols="0" rows="0" style="overflow: hidden; min-height: 16px;">Digite seu coment&aacute;rio</textarea>
							
							
							<div class="recaptcha-cont">
								<input type="text" id="recaptcha-response-field" name="recaptcha-response-field" autocomplete="off" value="Digite os caracteres ao lado">
								<div class="recaptcha-img">
									<img src="{{MEDIA_URL}}imagens/img-captcha.jpg" />
								</div>
								<button class="recaptcha-reload" type="button"><span>Atualizar imagem</span></button>
							    <input type="submit" class="recaptcha-enviar botao-padrao entrar" value = "Comentar"></input>
							</div>
							</form>
						</div>						
					</div>
				</div>
				<div id="box_direita_produto">
					<div class="box_inf_produto">
						<h4>{{anuncio.descricao}}</h4>
                        <span class="num_visitas"><strong>{{anuncio.quantidadeAcesso}}</strong> visitas</span>
                        <p class="preco">R$ {{anuncio.preco|formata}}</p>
                        <p class="resumo">{{anuncio.dataCadastro}} - {{anuncio.tipo}}</p>
                        <p class="resumo">{{anuncio.cidade}} - {{anuncio.cidade.get_estado_display}}</p>
                        <div class="compartilhar">
                        	<p>Compartilhe:</p>
	                        <a href="http://twitter.com/?status={{anuncio.descricao}} - R$ {{anuncio.preco}} http://www.classi180.com/anuncio/{{anuncio.id}} &#64;classi180" target="_blank" class="social tw" title="De um twitter do seu anuncio"></a>
	                        <a href="javascript: void(0);" onclick="window.open('http://www.facebook.com/sharer.php?s=100&p[title]={{anuncio.descricao}}&p[summary]={{anuncio.detalhes|truncatewords:'45'}}&p[url]=http://www.classi180.com/anuncio/{{anuncio.id}}/&p[images][0]=http://www.classi180.com/media/{{anuncio.foto}}','ventanacompartir', 'toolbar=0, status=0, width=650, height=450');" class="social fb" href="#" title="Compartilhe no Facebook"></a>
	                        <a href="https://plus.google.com/share?url=http://www.classi180.com/anuncio/{{anuncio.id}}" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" class="social gm" title="Compartilhe no Google+"></a>
						</div>
	                    <a href = "/contatar_anunciante/{{usuario.id}}" target="_blank"><button type="submit">Contatar ao Anunciante</button></a>
						<div class="barra_inf">
							<p class="titulo">ANUNCIADO POR</p>
						</div>
						<div class="box_anuncio">
							<div class="box_foto_anuncio">
								<a href="/perfil/{{usuario.id}}" title="Foto perfil"><img src="{{MEDIA_URL}}{{usuario.thumbnail}}" /></a> 
							</div>
							<div class="box_inf_anuncio">
		                        <a href="/perfil/{{usuario.id}}"><span class="icon user_icon"></span> {{usuario.nome}}</a>	
		                        <a href="/perfil/{{usuario.id}}"><span class="icon tel_icon"></span> {{usuario.telefone}}</a></a>	
		                        <a href="/perfil/{{usuario.id}}"><span class="icon anuncios_icon"></span>Todos os an&uacute;ncios do usu&aacute;rio</a>	
		                       <!--  <a onclick="showDiv('box_resumo')"><span class="icon rnk_icon"></span>Reputa&ccedil;ao do anunciante:</a> -->
								<!-- div id="box_resumo">
									<img src="{{MEDIA_URL}}imagens/balao_destaque.png"/>
			                        <p><span class="icon reputacao_icon"></span><span class="icon reputacao_icon"></span><span class="icon reputacao_icon"></span><span class="icon reputacao_icon_false"></span><span class="icon reputacao_icon_false"></span></p>
									<p><strong>Anuncios:</strong> 20 | <strong>Avaliacoes:</strong> 300</p>
									<p>Avaliacoes positivas: 222 - <em style="color:#08d645;">74%</em></p>
									<p>Avaliacoes negativas: 78 -  <em style="color:#df0024;">26%</em></p>
									<p style="border:0;"><a>Entenda a avaliacao</a></p>
								</div -->
							</div>
						</div>
						<div class="box_publicidade">
							<div class="unit_right pub_right">
								<a href="#" title="Publicidade 2" ><img src="{{MEDIA_URL}}imagens/pub3.png">Publicidade 2</a> 
							</div>
						</div>
						<div class="anuncios_pag_produto">
							<div class="box_titulo">
								<h4 class="titulo_anuncio">An&uacute;nicos do vendedor</h4>
								<form class="opc_busca">
									<select>
										<option>Categorias</option>
										<option>Empregos</option>
										<option>Im&oacute;veis</option>
										<option>Neg&oacute;cios</option>
										<option>Ve&iacute;culos</option>
									</select>
								</form>
							</div>
							{%if anuncios%}
							<ul class="box_anuncios pag_produto">
							{%for anuncioListagem in anuncios%}
								<li class="linha  b_anuncios">
									<a class="img_anuncio" href="/anuncio/{{anuncioListagem.id}}" ><img src="{{MEDIA_URL}}/{{anuncioListagem.foto}}"/></a>
									<a class="nome_anuncio" href="/anuncio/{{anuncioListagem.id}}">{{anuncioListagem.descricao}}</a>
									<span class="preco_anuncio">
										<em>R$ {{anuncioListagem.preco|formata}}</em>
									</span>
									<p class="data_publicacao">{{anuncioListagem.dataCadastro}}</p>
								</li>
							{%endfor%}
							</ul>
							{%endif%}
						</div>
						<div class="anuncios_pag_produto">
							<div class="box_titulo">
								<h4 class="titulo_anuncio">Blog Classi180</h4>
								<form class="opc_busca">
									<select>
										<option>&Uacute;ltimas not&iacute;cias</option>
										<option>Mais lidas</option>
										<option>Mais comentadas</option>
										<option>Promo&ccedil;oes</option>
										<option>Enquetes</option>
										<option>Dicas</option>
										<option>Novidades no classi180</option>
									</select>
								</form>
							</div>
							<ul class="box_anuncios pag_produto">
							{%for noticia in noticias%}
								<li class="linha  b_blog">
									<span>{{forloop.counter}}</span>
									<a>{{noticia.titulo}}</a>
								</li>
							{%endfor%}
							</ul>
						</div>						
					</div>
				</div>
			</div>
		</div>
		<div id="top_destaque">
			<div class="box_titulo">
				<h4 class="titulo_anuncio">An&uacute;ncios Relacionados</h4>
				<form class="opc_busca">
					<select>
						<option>Cidades</option>
						<option>Teresina</option>
						<option>Parnaiba</option>
					</select>
					<select>
						<option>Categorias</option>
						<option>Empregos</option>
						<option>Im&oacute;veis</option>
						<option>Neg&oacute;cios</option>
						<option>Ve&iacute;culos</option>
					</select>
					<input type="text">
					<input type="button">
				</form>
			</div>
			<ul class="classi180-940">
			{%for anuncioRelacionado in relacionados%}
				<li>
					<a class="borda-interna" href="/anuncio/{{anuncioRelacionado.id}}"><img src="{{MEDIA_URL}}{{anuncioRelacionado.thumbnail}}" /></a>
					<p><a href="/anuncio/{{anuncioRelacionado.id}}">{{anuncioRelacionado.descricao}}</a></p>
					<p class="preco">R$ {{anuncioRelacionado.preco|formata}}</p>
				</li>
			{%endfor%}
	        </ul>
		</div>
		<div id="publicidade">
			<div class="publicidade_link">
				<a href="#" title="Publicidade 3" ><img src="{{MEDIA_URL}}imagens/pub4.png">Publicidade 3</a> 
			</div>
		</div>
	</div>
	{%include "rodape_regioes.html"%}
</body>
</html>